<template>
  <n-config-provider>
    <n-message-provider>
      <n-notification-provider>
        <n-dialog-provider>
          <n-loading-bar-provider>
            <n-layout has-sider :style="{ height: '100vh' }">
              <Sidebar />
              <n-layout>
                <HeaderBar />
                <n-layout-content class="p-4 bg-gray-50 min-h-screen">
                  <router-view />
                </n-layout-content>
              </n-layout>
            </n-layout>
          </n-loading-bar-provider>
        </n-dialog-provider>
      </n-notification-provider>
    </n-message-provider>
  </n-config-provider>
</template>

<script setup>
import { 
  NLayout, 
  NLayoutContent, 
  NConfigProvider,
  NMessageProvider,
  NNotificationProvider,
  NDialogProvider,
  NLoadingBarProvider
} from 'naive-ui'
import Sidebar from './components/Sidebar.vue'
import HeaderBar from './components/HeaderBar.vue'
</script>

<style>
body, html, #app {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background-color: #f5f5f5;
}

.h-screen {
  height: 100vh;
}

.flex-1 {
  flex: 1;
}

</style>